<template>
  <el-container>
    <el-aside width="200px">
      <div class="aside-title">十方智育</div>
      <el-menu
          router
          :default-active="defaultActive"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :default-openeds="defaultOpeneds"
      >

        <el-sub-menu index="1">
          <template #title>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/admin/users">
            普通用户管理
          </el-menu-item>
          <el-menu-item index="/admin/announcement">
            公告管理
          </el-menu-item>
          <el-menu-item index="/admin/company">
            公司管理
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <span>课程管理</span>
          </template>
          <el-menu-item index="/admin/courseclassifys">
            课程分类管理
          </el-menu-item>
          <el-menu-item index="/admin/courses">
            课程管理
          </el-menu-item>
          <el-menu-item index="/admin/courseevaluation">
            课程评价管理
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <span>师资管理</span>
          </template>
          <el-menu-item index="/admin/consultants">
            咨询师管理
          </el-menu-item>
          <el-menu-item index="/admin/liked">
            擅长领域管理管理
          </el-menu-item>
          <el-menu-item index="/admin/pay">
            收费标准管理
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <span>内容管理</span>
          </template>
          <el-menu-item index="/admin/article">
            文章管理
          </el-menu-item>
          <el-menu-item index="/admin/psychologicalknowledgemanagement">
            心理知识管理
          </el-menu-item>
          <el-menu-item index="/admin/fmmanagement">
            FM管理
          </el-menu-item>
          <el-menu-item index="/admin/commonweal">
            公益中心管理
          </el-menu-item>
          <el-menu-item index="/admin/consultantmanagement">
            心理测试管理
          </el-menu-item>
        </el-sub-menu>





        <el-menu-item index="/admin/my">
          <span>个人中心</span>
        </el-menu-item>


      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="display: flex; justify-content: center; align-items: center;background-color: aqua;">
        管理员系统界面
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const defaultActive = ref(route.path);
const defaultOpeneds = ref([]);

// 监听路由变化，动态更新 defaultActive 和 defaultOpeneds
watch(route, (newRoute) => {
  defaultActive.value = newRoute.path;
  // 清空默认展开的子菜单
  defaultOpeneds.value = [];
});
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.el-aside {
  background-color: #545c64;
  height: 100vh;
}
.aside-title {
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.el-main {
  padding: 20px;
}
</style>
